// 主体内容宽度
$msgWitdh:1200px;
.wrapper{
    width: $msgWitdh;
    margin: 0 auto;
}
// 头部宽度
$headerHeight:36px;
header{
    height: $headerHeight;
}
// 背景色
$bgColor:#000000;
#nav_head{
    background-color: $bgColor;
}
#nav_1{
    display: flex;
    height: 36px;
    justify-content: space-between;
    
}
.nav_1_left{
    height: 36px;
    >ul{
        display: flex;
        line-height: 36px;
        li{
            margin-right: 5px;
            padding-left: 5px;
            padding-right: 5px;
        }
    }
}
.nav_1_right{ 
    @extend .nav_1_left;
    div{
        height: 36px;
        li{
            float: left;
        }
    }
}
// 默认字体颜色
$fontColor:#a1a09d;
.nav_1_span{
   color: $fontColor;
}
.nav_1_hei{
    span:hover{
        color: #eeeeec;
    }   
}

.ic{
    position: relative;
    font-size: 12px;
    margin-left: 5px;
    color: $fontColor;
    font-weight: 600;
}
#cart{
    background-color: #424242;
}
#shoping{
    margin-left: 10px;
    margin-right: 5px;
}

.more:hover{
    background-color: #fff !important;
} 
// 触发之后的颜色
$hfontColor:#CF0A2C;
.more:hover{
    span{
        color: $hfontColor;
    }
}
.more:hover{
    #more_1{
        display: block;
    }
}
#more_1{
    width: 100px;
    background-color: #fff;
    display: none;
    position: absolute;
    padding: 0px 5px;
    color: #7a7a79;
    z-index: 1;
}
.more{
    p:hover{
        color: $hfontColor;
    }
}

#nav_head_2{
    height: 74px;
}
#nav_2{
    display: flex;
    justify-content: space-between;
    height: 74px;
}
#nav_2_left{
    width: 204px;
    line-height: 74px;
}
#nav_2_left{
    >img{
        width: 204px;
        height: 34px;
    }
}

#nav_2_center{
    width: 942.5px;
    margin-left: 8px;
    display: flex;
    padding-left: 80px;
}
#nav_2_center{
    a{
        width: 104px;
        color: #000000;
        font-size: 16px;
        line-height: 74px;
    }
}
#nav_2_center{
    a:hover{
        color: $hfontColor;
    }
}
#nav_2_right{
    width: 45.5px;
    line-height: 74px;
}
#nav_2_right{
    a{
        color: #7a7a79;
    }
}
#nav_2_right{
    a:hover{
        color: #3b3b3b;
    }
}
#nav_2_right {
    a{
        >span{
            font-size: 20px;
        }
    }
}

#banner{
    position: relative;
    background-color: #F1F3F5;
    width: 100%;
    height: 526px;
    // overflow: hidden;
}
.wrapperBn{
    width: 1519.2px !important;
    margin: 0px auto;
}
#banner_main{
    position: absolute;
    height: 526px;
    top: 0px;
    margin-left: 159.6px;
}
#banner_nav{
    display: flex;
    width: 200px;
    min-height: 466px;
    background-color: #FAF9F9;
    position: absolute;
    top: 30px;
    flex-direction: column;
    justify-content: space-between;
}
.bnav{
    width: 100%;
    height: 40px;
    padding-top: 27px;
    >a{
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
    }
}
.bnaspan{
    font-size: 16px;
    color: #7a7a79;
}
.bic{
    font-size: 12px;
   transform: rotate(270deg);
}

.bnavMsg{
    display: flex;
    background-color: #fff;
    width: 400px;
    height: 466px;
    position: absolute;
    left: 200px;
    top: 0px;
    flex-direction: column;
    justify-content: space-evenly;
    display: none;
    z-index: 2;
}
.bnavMsg_more{
    width: 200px;
    padding-left: 30px;
    font-size: 18px;
}
.bnavMsg_more{
    a{
        color: #7a7a79;
    }
}

.bnav:hover {
    a{
        >span{
            color: #3b3b3b;
        }
    }
}
.bnav:hover{
    .bnavMsg{
        display: flex;
    }
}

.bnavMsg_more:hover{
    a{
        color: $hfontColor;
    }
}

#banner_img{
    position: relative;
}
#banner_click{
    position: absolute;
    top: 240px;
    left: 400px;
}
#clickLeft{
    background-color: rgba($color: #000000, $alpha: 0.3);
    width: 50px;
    height: 50px;
    position: absolute;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    transform: rotate(90deg);
    z-index: 1;
}
#clickLeft:hover{
    cursor: pointer;
}
#clickLeft:hover{
    cursor: pointer;
}
#clickRight{
    @extend #clickLeft;
    left: 900px;
    transform: rotate(-90deg);
}
#bannerList{
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    width: 200px;
    height: 20px;
    top: 480px;
    left: 700px;
    
    span{
        width: 10px;
        height: 10px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        border-radius: 50%;
    }
}
.heiLight{
    background-color: #fff !important;
}

#Bannerimgbox{
    display: flex;
    img{
        width: 1536px;
        height: 526px;
    }
}

.banner2 {height:526px;margin: 0 auto;position: relative;overflow: hidden;}
.banner2 .imgbox{width: 1536px;height: 526px;}
.banner2 .imgbox img{width: 1536px;height: 526px;position: absolute;left:-1536px;top:0;}
.banner2 .imgbox img:first-child{left:0;}

.banner2 .btns *{position: absolute;top:60px;width: 30px;height: 30px;border: none;background: rgba(200,200,200,0.6);}
.banner2 #left{left:0}
.banner2 #right{right:0}

.banner2 .list{display: flex;height: 30px;line-height:30px;text-align: center;position: absolute;bottom: 0;left:0;width: 100%;justify-content: center}
.banner2 .list span{background: rgb(100,100,100);cursor: pointer;width: 20px;height: 20px;border-radius: 50%;margin: 0 20px;}
.banner2 .list span.active{background: #fff;color:#fff;}

// 信息背景色
$msgBg:#F1F3F5;
#moreMsg{
    background-color: $msgBg;
    overflow: hidden;
    padding-bottom: 20px;
}
.msgTitle{
    height: 64px;
    display: flex;
    padding: 10px 0px;
    line-height: 64px;
    font-size: 20px;
    p{
        margin-right: 30px;
        color: #929292;
    }
}
.pactive{
    color: black !important;
}

.pMsg{
    display: flex;
    flex-wrap: wrap;
    .pMsgList{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        width: 291px;
        height: 367px;
        background-color: #fff;
        margin-right: 9px;
        margin-bottom: 10px;
        img{
            width: 291px;
            height: 253px;
        }
    }
    .pTxt{
        text-align: center;
        margin: 10px 0px;
        :nth-child(1){
            font-size: 16px;
            margin-bottom: 5px;
        }
        :nth-child(2){
            font-size: 14px;
            color: $hfontColor;
        }
    }
}

.wMsg{
    @extend .pMsg;
}

#footer{
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
    h6{
        margin: 10px;
    }
    li{
        margin: 10px;
        color: #7a7a79;
    }
}

#flowNav{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: fixed;
    z-index: 9;
    width: 80px;
    height: 120px;
    border: 1px solid rgba($color: #000000, $alpha: 0.3);
    border-radius: 5px;
    background-color: #fff;
    left: 1420px;
    top: 500px;
    li{
        font-size: 14px;
        color: #7a7a79;
        text-align: center;
    }
    li:hover{
        color: $hfontColor;
    }
}

.pMsgChild{
    display: none;
    flex-wrap: wrap;
}

.msgTitle2{
    @extend .msgTitle;
}